<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/bootstrap.min.css" />
  <link rel="stylesheet" href="./alibaba/iconfont/iconfont.css" />
  <link rel="stylesheet" href="./alibaba/fonts/font.css" />
  <link rel="stylesheet" href="./css/style.css" />
  <link rel="stylesheet" href="./less/css/Message.css" />
  <script src="./js/jquery.min.js" ></script>
</head>
<body>
<div id="message_box1">
  <div class="message_box1_content">
    <div class="col-xs-4 mb1c_box1">
      <span onclick="window.location.href='SellCar.html'" class="icon iconfont back icon-back"></span>
    </div>
    <div class="col-xs-4 text-center mb1c_box2">
      <a onclick='showChat("star")'>star</a>
    </div>
    <div class="col-xs-4 text-right mb1c_box3">
      <span class="icon iconfont icon-xiaoxi"></span>
    </div>
  </div>
</div>
<div id="message_box2">
  <div id="content" class="message_box2_content">
<!--    <div class="mb2c_time">2019-08-10 19:30</div>-->
    <div class="mb2c_left">
<!--      <div class="text-center mb2c_left_box1">-->
<!--        <img src="./images/userImages/xiaojiejie_01.png">-->
<!--      </div>-->
<!--      <div class="mb2c_left_box2">-->
<!--        <p>您好，我看您这明天是去深圳的顺风车，方便搭个伴吗？男生一枚...</p>-->
<!--      </div>-->
<!--    </div>-->

<!--    <div class="mb2c_time">2019-08-12 19:30</div>-->
<!--    <div class="mb2c_right">-->
<!--      <div class="mb2c_right_box1" style="">-->
<!--        <p>您好！没问题啊，明天几点出发？</p>-->
<!--      </div>-->
<!--      <div class="mb2c_right_box2 text-center">-->
<!--        <img src="./images/userImages/xiaojiejie_02.png" />-->
<!--      </div>-->
<!--    </div>-->

<!--    <div class="mb2c_left">-->
<!--      <div class="text-center mb2c_left_box1">-->
<!--        <img src="./images/userImages/xiaojiejie_01.png">-->
<!--      </div>-->
<!--      <div class="mb2c_left_box2">-->
<!--        <p>您好，我看您这明天是去深圳的顺风车，方便搭个伴吗？男生一枚...</p>-->
<!--      </div>-->
    </div>
  </div>
</div>
<div id="message_box3">
  <div class="mb3_box1">
    <div>
      <textarea></textarea>
    </div>
  </div>
  <div class="mb3_box2 text-center">
    <span class="icon iconfont icon-biaoqingbao1"></span>
  </div>
  <div class="mb3_box3 text-center">
    <span class="icon iconfont icon-icon_tianjia"></span>
  </div>
  <div class="mb3_box4">
    <div id="submit" class="text-center btn-primary">发送</div>
  </div>
</div>
<script>
  let str_m;
  $(function(){
    // 首次加载就自动滚动到最下方
    judgeScroolHight();
    console.log($('.mb3_box4').first().find('.btn-primary').html())
    $('.mb3_box4').first().find('.btn-primary').click(function(){
      // console.log('点击事件')
      str_m = $('.mb3_box1').find('textarea').val();
      let html=`<div class="mb2c_right">
                            <div class="mb2c_right_box1" style="">
                                <p>${str_m}</p>
                            </div>
                            <div class="mb2c_right_box2 text-center">
                                <img src="./images/userImages/xiaojiejie_02.png" />
                            </div>
                        </div>`;
      // 将输入的内容添加到对话框中
      $('.message_box2_content').first().append(html)
      // 清空输入框里面的值
      $('.mb3_box1').find('textarea').val('')
      judgeScroolHight()
      // console.log('高度',$('.message_box2_content').first().height())
    })

    // 自动滚动到对话框的最底部
    function judgeScroolHight(){
      // to do
    }
    // 点击输入自动出现发送按钮
    $('.mb3_box1').find('textarea').focus(function(){
      // console.log('获得焦点')
      $('.mb3_box2').first().css('display','none')
      $('.mb3_box3').first().css('display','none')
      $('.mb3_box4').first().css('display','block')

    })
    // 点击 #message_box1,#message_box2盒子自动隐藏发送按钮
    $('#message_box1,#message_box2').click(function(){
      // console.log('失去焦点')
      $('.mb3_box2').first().css('display','block')
      $('.mb3_box3').first().css('display','block')
      $('.mb3_box4').first().css('display','none')
    })
  })

  //     ---------------------------------聊天
  var username;
  $(function () {
    var toName;
    $.ajax({
      url:"/user/getUsername",
      success:function (res) {
        console.log(res)
        username = res;
        $("#username").html("用户："+ username +"<span>在线</span>");
        // $("#username").html("用户：123<span>在线</span>");
      },
      async:false //同步请求，只有上面好了才会接着下面
    });

    var ws = new WebSocket("ws://localhost:8901/chat");

    //服务器
    // var ws = new WebSocket("ws://47.113.193.144:8901/chat");
    ws.onopen = function (ev) {
      $("#username").html("用户："+ username +"<span>在线</span>");
    }
    //接受消息
    ws.onmessage = function (ev) {
      var datastr = ev.data;
      var res = JSON.parse(datastr);
      //判断是否是系统消息
      if(res.system){
        //好友列表
        //系统广播
        var names = res.message;
        var userlistStr = "";
        var broadcastListStr = "";
        for (var name of names){
          if (name != username){
            userlistStr += "<a onclick='showChat(\""+name+"\")'>"+ name +"</a></br>";
            broadcastListStr += "<p>"+ name +"上线了</p>";
          }
        };
        $("#hylist").html(userlistStr);
        $("#xtlist").html(broadcastListStr);

      }else {
        //不是系统消息
        var str = "<div class=\"mb2c_left\">\n" +
                "                <div class=\"text-center mb2c_left_box1\">\n" +
                "                    <img src=\"./images/userImages/xiaojiejie_01.png\">\n" +
                "                </div>\n" +
                "                <div class=\"mb2c_left_box2\">\n" +
                "                    <p>"+ res.message +"</p>\n" +
                "                </div>\n" +
                "            </div>"
        // var str = "<span id='mes_left'>"+ res.message +"</span></br>";
        if (toName == res.fromName)
          $("#content").append(str);

        var chatdata = sessionStorage.getItem(res.fromName);
        if (chatdata != null){
          str = chatdata + str;
        }
        sessionStorage.setItem(res.fromName,str);

      };
    },
            ws.onclose = function (ev) {
              $("#username").html("用户："+ username +"<span>离线</span>");
            }

    showChat = function(name){
      // alert("dsaad");
      toName = name;
      //清空聊天区
      $("#content").html("");
      $("#new").html("当前正与"+toName+"聊天");
      var chatdata = sessionStorage.getItem(toName);
      if (chatdata != null){
        $("#content").html(chatdata);
      }
    };
    //发送消息
    $("#submit").click(function () {
      //获取输入的内容
      var data = $("#input_text").val();
      $("#input_text").val("");
      var json = {"toName": toName ,"message": str_m};
      //将数据展示在聊天区
      var str = "<span id='mes_right'>"+ str_m +"</span></br>";


      var chatdata = sessionStorage.getItem(toName);
      if (chatdata != null){
        str = chatdata + str;
      }
      sessionStorage.setItem(toName,str);
      //发送数据
      ws.send(JSON.stringify(json));
    })
  })

</script>
</body>
</html>